<!DOCTYPE html>
<html lang="zh">
<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> 
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>基于bootsnav的简洁多级导航菜单|DEMO_jQuery之家-自由分享jQuery、html5、css3的插件库</title>
	<link href="http://cdn.bootcss.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">
	<link href="http://cdn.bootcss.com/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet">
	<link rel="stylesheet" type="text/css" href="css/htmleaf-demo.css">
	<link rel="stylesheet" type="text/css" href="css/bootsnav.css">
	<style type="text/css">
		.navbar-brand{
		    padding: 29px 15px;
		    height: auto;
		}
		nav.navbar.bootsnav{
		    border: none;
		    margin-bottom: 150px;
		}
		.navbar-nav{
		    float: left;
		}
		nav.navbar.bootsnav ul.nav > li > a{
		    color: #474747;
		    text-transform: uppercase;
		    padding: 30px;
		}
		nav.navbar.bootsnav ul.nav > li:hover{
		    background: #f4f4f4;
		}
		.nav > li:after{
		    content: "";
		    width: 0;
		    height: 5px;
		    background: #34c9dd;
		    position: absolute;
		    bottom: 0;
		    left: 0;
		    transition: all 0.5s ease 0s;
		}
		.nav > li:hover:after{
		    width: 100%;
		}
		nav.navbar.bootsnav ul.nav > li.dropdown > a.dropdown-toggle:after{
		    content: "+";
		    font-family: 'FontAwesome';
		    font-size: 16px;
		    font-weight: 500;
		    position: absolute;
		    top: 35%;
		    right: 10%;
		    transition: all 0.4s ease 0s;
		}
		nav.navbar.bootsnav ul.nav > li.dropdown.on > a.dropdown-toggle:after{
		    content: "\f105";
		    transform: rotate(90deg);
		}
		.dropdown-menu.multi-dropdown{
		    position: absolute;
		    left: -100% !important;
		}
		nav.navbar.bootsnav li.dropdown ul.dropdown-menu{
		    box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
		    border: none;
		}
		@media only screen and (max-width:990px){
		    nav.navbar.bootsnav ul.nav > li.dropdown > a.dropdown-toggle:after,
		    nav.navbar.bootsnav ul.nav > li.dropdown.on > a.dropdown-toggle:after{ content: " "; }
		    .dropdown-menu.multi-dropdown{ left: 0 !important; }
		    nav.navbar.bootsnav ul.nav > li:hover{ background: transparent; }
		    nav.navbar.bootsnav ul.nav > li > a{ margin: 0; }
		}
	</style>
</head>
<body>
	<div class="htmleaf-container">
		<header class="htmleaf-header">
			<h1>基于bootsnav的简洁多级导航菜单</h1>
			<div class="htmleaf-links">
				<a class="htmleaf-icon icon-htmleaf-home-outline" href="http://www.htmleaf.com/" title="jQuery之家" target="_blank"><span> jQuery之家</span></a>
				<a class="htmleaf-icon icon-htmleaf-arrow-forward-outline" href="http://www.htmleaf.com/jQuery/Menu-Navigation/201704174461.html" title="返回下载页" target="_blank"><span> 返回下载页</span></a>
			</div>
		</header>
		<div class="demo" style="padding: 2em 0;">
	        <div class="container">
	            <div class="row">
	                <div class="col-md-12">
	                    <nav class="navbar navbar-default navbar-mobile bootsnav">
	                        <div class="navbar-header">
	                            <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar-menu">
	                                <i class="fa fa-bars"></i>
	                            </button>
	                        </div>
	                        <div class="collapse navbar-collapse" id="navbar-menu">
	                            <ul class="nav navbar-nav" data-in="fadeInDown" data-out="fadeOutUp">
	                                <li><a href="#">Home</a></li>
	                                <li><a href="#">About Us</a></li>
	                                <li class="dropdown">
	                                    <a href="#" class="dropdown-toggle" data-toggle="dropdown">Shortcodes</a>
	                                    <ul class="dropdown-menu">
	                                        <li><a href="#">Custom Menu</a></li>
	                                        <li><a href="#">Custom Menu</a></li>
	                                        <li class="dropdown">
	                                            <a href="#" class="dropdown-toggle" data-toggle="dropdown" >Sub Menu</a>
	                                            <ul class="dropdown-menu">
	                                                <li><a href="#">Custom Menu</a></li>
	                                                <li><a href="#">Custom Menu</a></li>
	                                                <li class="dropdown">
	                                                    <a href="#" class="dropdown-toggle" data-toggle="dropdown" >Sub Menu</a>
	                                                    <ul class="dropdown-menu multi-dropdown">
	                                                        <li><a href="#">Custom Menu</a></li>
	                                                        <li><a href="#">Custom Menu</a></li>
	                                                        <li><a href="#">Custom Menu</a></li>
	                                                        <li><a href="#">Custom Menu</a></li>
	                                                    </ul>
	                                                </li>
	                                                <li><a href="#">Custom Menu</a></li>
	                                            </ul>
	                                        </li>
	                                        <li><a href="#">Custom Menu</a></li>
	                                        <li><a href="#">Custom Menu</a></li>
	                                        <li><a href="#">Custom Menu</a></li>
	                                        <li><a href="#">Custom Menu</a></li>
	                                    </ul>
	                                </li>
	                                <li class="dropdown">
	                                    <a href="#" class="dropdown-toggle" data-toggle="dropdown">Pages</a>
	                                    <ul class="dropdown-menu">
	                                        <li><a href="#">Custom Menu</a></li>
	                                        <li><a href="#">Custom Menu</a></li>
	                                        <li class="dropdown">
	                                            <a href="#" class="dropdown-toggle" data-toggle="dropdown">Sub Menu</a>
	                                            <ul class="dropdown-menu">
	                                                <li><a href="#">Custom Menu</a></li>
	                                                <li><a href="#">Custom Menu</a></li>
	                                                <li class="dropdown">
	                                                    <a href="#" class="dropdown-toggle" data-toggle="dropdown">Sub Menu</a>
	                                                    <ul class="dropdown-menu multi-dropdown">
	                                                        <li><a href="#">Custom Menu</a></li>
	                                                        <li><a href="#">Custom Menu</a></li>
	                                                        <li><a href="#">Custom Menu</a></li>
	                                                        <li><a href="#">Custom Menu</a></li>
	                                                    </ul>
	                                                </li>
	                                                <li><a href="#">Custom Menu</a></li>
	                                            </ul>
	                                        </li>
	                                        <li><a href="#">Custom Menu</a></li>
	                                        <li><a href="#">Custom Menu</a></li>
	                                        <li><a href="#">Custom Menu</a></li>
	                                        <li><a href="#">Custom Menu</a></li>
	                                    </ul>
	                                </li>
	                                <li><a href="#">Portfolio</a></li>
	                                <li><a href="#">Contact Us</a></li>
	                            </ul>
	                        </div>
	                    </nav>
	                </div>
	            </div>
	        </div>
	    </div>
		<div class="related">
		    <h3>如果你喜欢这个插件，那么你可能也喜欢:</h3>
		    <a href="http://www.htmleaf.com/jQuery/Menu-Navigation/201611254218.html">
			  <img src="related/1.jpg" width="300" alt="jQuery仿旅游网站侧边栏菜单特效"/>
			  <h3>jQuery仿旅游网站侧边栏菜单特效</h3>
			</a>
			<a href="http://www.htmleaf.com/jQuery/Menu-Navigation/201606083575.html">
			  <img src="related/2.jpg" width="300" alt="23种Bootstrap导航菜单布局设计jQuery插件"/>
			  <h3>23种Bootstrap导航菜单布局设计jQuery插件</h3>
			</a>
		</div>
	</div>
	
	<script src="http://cdn.bootcss.com/jquery/1.11.0/jquery.min.js" type="text/javascript"></script>
	<script>window.jQuery || document.write('<script src="js/jquery-1.11.0.min.js"><\/script>')</script>
	<script src="http://cdn.bootcss.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
	<script type="text/javascript" src="js/bootsnav.js"></script>
</body>
</html>